<!DOCTYPE html>
<html>
<head lang="en">
    <link rel="stylesheet" href="../css/theme.css" type="text/css"/>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="display: none"><strong>this is a css3 demo html page.</strong></div>
<div style="border: 2px solid;border-radius: 25px;-moz-border-radius: 25px;background: gray;">这个矩形有圆角哦！</div>
<div style="box-shadow: 10px 10px 5px #888888;">阴影</div>
<div style="border-image:url(../image/border.png) 30 30 round;-moz-border-image:url(../image/border.png) 30 30 round; /* 老的 Firefox */-webkit-border-image:url(../image/border.png) 30 30 round; /* Safari 和 Chrome */-o-border-image:url(../image/border.png) 30 30 round; /* Opera */">
    图片边框
</div>
<div style="height:100px;width:63px;background:url(../image/bg_flower.gif);-moz-background-size:63px 100px; /* 老版本的 Firefox */background-size:63px 100px;background-repeat:no-repeat;"></div>
</body>
<div style="background:url(../image/bg_flower.gif);-moz-background-size:40% 100%; /* 老版本的 Firefox */background-size:40% 100%;background-repeat:no-repeat;">
    对背景图片进行拉伸，使其完成填充内容区域：
</div>
<div style="background:url(../image/bg_flower.gif);background-repeat:no-repeat;background-size:100% 100%;-webkit-background-origin:content-box; /* Safari */background-origin:content-box;">
    CSS3 background-origin 属性
</div>
<h1 style="text-shadow: 5px 5px 5px #c4b32a;">您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：</h1>
<div style="height: 100px;width: 100px;word-wrap: break-word">
    This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
</div>

</html>